<template>
    <section v-loading="loading">
        <el-button @click="add" type="primary" size="mini" style="height: 36px">新增运费模版</el-button>
        <div class="freight-list" v-for="(item, index) of freightData">
            <div class="freight-nav" @click="show(index)">
                <p class="freight-nav_title">{{item.name}}</p>
                <p class="freight-nav_text">最后编辑时间 {{item.updated_at ? item.updated_at : item.created_at}}</p>
                <el-button type="text" size="mini" @click="edit(item.id)">编辑</el-button>
                <el-button type="text" size="mini" @click="del(item.id)">删除</el-button>
                <i v-show="showIndex !== 0" class="el-icon-caret-left" style="color: #3F7DFF;"></i>
                <i v-show="showIndex === 0" class="el-icon-caret-bottom" style="color: #3F7DFF;"></i>
            </div>
            <el-collapse-transition>
                <div class="freight-content" v-show="showIndex === index">
                    <el-table
                            :data="item.areas"
                            style="width: 100%">
                        <el-table-column
                                :resizable="false"
                                label="可配送区域">
                            <template slot-scope="scope">
                                <span>{{ getProvinces(scope.row.provinces) }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                :resizable="false"
                                prop="first_number"
                                :label="`${item.type== 1 ? '首件（Kg）' : '首重（Kg）'}`"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                :resizable="false"
                                prop="first_price"
                                label="运费（元）"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                :resizable="false"
                                prop="continue_number"
                                :label="`${item.type== 1 ? '续件（Kg）' : '续重（Kg）'}`"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                :resizable="false"
                                prop="continue_price"
                                label="续费（元）"
                                width="180">
                        </el-table-column>
                    </el-table>
                </div>
            </el-collapse-transition>
        </div>
    </section>
</template>

<script>
    export default {
        // 全局感知
        name: "Freight",

        // 模板依赖
        components: { },
        filters: {},

        // 接口
        props: {},

        // 本地状态
        data () {
            return {
                showIndex: -1,
                activeName: '1',
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }],
                freightData: [],
                loading: false
            };
        },
        computed: {},

        // 事件
        watch: {},
        beforeCreate () { },
        created () { },
        beforeMount () { },
        mounted () {
            this.initData();
        },
        beforeUpdate () { },
        updated () { },
        beforeDestroy () { },
        destroyed () { },

        // 非响应式的属性
        methods: {
            initData() {
                this.loading = true;
                axios
                    .get('admin_freights', {
                        params: {
                            pagination: 1,
                            pageSize: 9999,
                        }
                    })
                    .then(res => res.data.data)
                    .then(res => {
                        this.freightData = res;
                        this.loading = false;
                    })
            },
            getProvinces(data) {
                const textList = data.filter(item => item.level === 1).map(item => item.text);
                return textList.join("、");
            },
            add() {
                this.$router.push({ name: 'FreightEdit', query: {type: 'add'} });
            },
            show(index) {
                this.showIndex = this.showIndex === index ? -1 : index;
            },
            edit(id) {
                this.$router.push({ name: 'FreightEdit', query: {type: 'edit', id: id } });
            },
            del(id) {
                this.loading = true;
                axios
                    .post(`admin_freights/${id}`, {
                        _method: 'DELETE'
                    })
                    .then(res => {
                        this.initData();
                        this.showIndex = -1;
                        this.loading = false;
                    })
            }
        }
    }
</script>

<style scoped>
    .freight-list{
        margin-top: 20px;
    }
    .freight-nav{
        padding: 0 10px;
        width: 100%;
        height: 48px;
        background: #F6F6F6;
        border: 1px solid #D8D8D8;
        display: flex;
        flex-direction: row;
        align-items: center;
        cursor: pointer;
    }
    .freight-nav p, .freight-nav button{
        margin: 0 10px;
        padding: 0;
    }
    .freight-nav .freight-nav_title, .freight-nav .freight-nav_text, .freight-nav button{
        font-size: 12px
    }
    .freight-nav_title{
        flex: 1;
        color: #333333;
    }
    .freight-nav_text{
        color: #999999;
    }
    .freight-content{

    }
</style>

<style>
    .freight-list .el-table th.is-leaf, .freight-list .el-table td{
        border-bottom: 1px solid #ebeef5;
    }
    .freight-list thead tr th div{
        font-size: 12px;
        color: #333333;
    }
    .freight-list table tbody tr th div{
        font-size: 14px;
        color: #333333;
    }

</style>